<template>
  <div class="food-list">
    <van-tree-select v-if="index === 0"
    color="#ffc400"
      v-model:main-active-index="activeIndex"
      height="55vw"
      :items="items"
      @click-nav="navClick"
    >
      <template #content>
       <div v-for="(item,index) in subItme" :key="index" class="item-bg">
         <ListItem :itemList="item" :clickAdd="clickAdd" :changeNum="changeNum"/>
       </div>
      </template>
    </van-tree-select>
    <div v-else>
        {{foodData.name}} 
    </div>
  </div>
</template>

<script>
import FoodListItem from './FoodListItem.vue'
import ListItem from '@/components/ListItem.vue'
import { reactive, toRefs } from "vue";
import {useStore} from 'vuex'
export default {
    props:['index','foodData'],
    components:{FoodListItem,ListItem},
  setup(props) {
    const store = useStore();
    const data = reactive({
        activeIndex:0,
        items: [],
        subItme:[]
    })
    // 初始化数据
    const initData = ()=>{
        let newArray = [];
        props.foodData?.items?.forEach((item,index) => {
            
            newArray.push({
                text:item.text
            })
            
            if( data.activeIndex === index){
              data.subItme = item.children
              console.log(item,index);
            }
        });
        data.items = newArray
        // console.log(data.subItme);
    }
    initData()
    const navClick = (i)=>{
      // console.log(i);
      data.activeIndex = i;
      initData()
    }
    const clickAdd =(id)=>{
      data.subItme.forEach((item,index)=>{
        if(item.id === id){
          item.add = false
          item.num += 1;
        }
      })
    }
    const changeNum = (value,detail)=>{
      data.subItme.forEach((item,index)=>{
        if(item.id === detail.name){
          item.num = value
        }
      })
    }
    return {
        ...toRefs(data),
        navClick,
        clickAdd,
        changeNum
    };
  },
};
</script>

<style lang="less" scoped>
.food-list {
  margin-top: 20px;
  .item-bg {
    padding: 10px;
  }
  }
  /deep/ .van-tree-select__item--active {
    color: #ffc400;
  }
  /deep/ .van-sidebar-item--select::before {
    background-color: #ffc400;
  }
</style>